<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="text" v-model="a">
        {{a}}
    </div>


    <script src="./base/vue.min.js"></script>
    <script>
        /*
            vue中采用了      mvc/mvp演变成mvvm
            mvvm解决了什么问题？
                解决了mvc反馈不及时的问题，或者实现了自动同步的更能

                            view

                controller         model

                也就是model层改变数据的时候，我们需要自己手动的更改dom
                而vm帮助我们实现了这个效果，改变model数据后该model数据所对应的视图view会自动更新
                vm将view与model两者进行了双向绑定。

            
            为什么  model层数据改变了，vm就可以知道数据改变了呢？
            （vue的mvvm的双向数据绑定的原理！）

            vue在创建vm的时候，会将数据配置在实例当中，然后通过Object.defineProperty对数据进行操作。
            为数据动态的添加了getter与setter方法，当获取数据的时候，将会触发getter方法，当我们设置数据
            的时候，将会触发setter方法，从而进一步触发vm的watcher方法，数据改变完成，vm则会触发视图的
            更新操作。


            vue中通过数据劫持&订阅发布模式：
                通过Object.defineProperty对所有的数据进行了数据劫持，当数据发生变化的时候，会触发自身的setter方法，
                然后发布消息给订阅者，触发其响应的监听回调。

            v-  vue指令以v-XX开头，指令只能用在标签上面
                v-model （注意：只能用在form表单元素上面  input/select/checkbox/radio等标签上才会有效果）
        
        */


            let data = {
                a:801
            }
            let viewmodel = new Vue({
                el:"#app",
                data:data
            })
            // console.log(data)
        

            //Object.defineProperty
            /* var _data = {}
            let middle = 10
            Object.defineProperty(_data,"msg",{
                get(){
                    return middle
                },
                set(val){
                    middle = val;
                }
            })
            console.log(_data.msg)    //获取_data的msg属性，会调用getter方法
            _data.msg = 20;           //设置_data的msg属性，会调用setter方法
            console.log(_data.msg)  */
    </script>
</body>
</html>